/** * 表格 - doc * */
<template>
  <div class="d-table">
    <resize-observer @notify="handleResize" />
    <el-table
      ref="elTable"
      :data="list"

      stripe
      :height="autoTableHeight"
      header-row-class-name="d-table-header"
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="projectCode" label="项目编号" />
      <el-table-column prop="projectName" label="项目名称" />
      <el-table-column prop="firmName" label="厂家名称" />
      <el-table-column prop="enterpriseName" label="企业名称" />
      <el-table-column prop="constructionTypeName" label="建设类型" />
      <el-table-column prop="structureTypeName" label="结构类型" />
      <el-table-column prop="allAddr" label="项目地址" />
      <el-table-column prop="capacity" label="项目容量" :formatter="formatter" />

      <!-- 操作 -->
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            class="d-table-btn-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            class="d-table-btn-del"
            @click="handleDel(scope.row)"
          >删除</el-button>
          <br>
          <el-button
            size="mini"
            type="text"
            class="d-table-btn-edit"
            @click="handleTree(scope.row)"
          >节点</el-button>
          <el-button
            size="mini"
            type="text"
            class="d-table-btn-edit"
            @click="handleDevice(scope.row)"
          >设备</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  data() {
    return {
      autoTableHeight: 200,
    }
  },

  // 计算属性
  computed: {
    selection() {
      return this.$refs.elTable.selection
    },
  },

  // 侦听属性
  watch: {},
  created() {
    this.handleResize()
  },
  mounted() {},
  methods: {
    load(d) {
    },
    handleResize() {
      // const x = document.getElementById('d-table-top-filter').offsetHeight
      this.$nextTick((res) => {
        const x = document.getElementById('w-table-filter').offsetHeight
        this.autoTableHeight =
          document.body.offsetHeight - 54 - 50 - 20 - 20 - 34 - 10 - 30 - x
      })
    },
    handleEdit(row) {
      this.$emit('edit', row)
    },
    handleTree(row) {
      this.$emit('tree', row)
    },
    handleDel(row) {
      this.$emit('del', row)
    },
    handleDevice(row) {
      this.$emit('device', row)
    },

    formatter(row, column, cellValue, index) {
      return `${cellValue} kVA`
    },
  },

}
</script>

<style lang="scss" scoped>
.企业图标 {
  width: auto;
  max-width: 180px;
  height: 60px;
}
</style>
